﻿@{
	ViewBag.Title = "Ajax";
}
@using System.Web.Optimization
@using X.PagedList;


@Styles.Render("~/Content/PagedList.css")

<h2>Ajax Paging</h2>
<ol id="namesList"></ol>
<div id="namesPager"></div>

@section Scripts{
	<script id="namesTemplate" type="text/template">
		{{#each this}}
		<li>{{this}}</li>
		{{/each}}
	</script>
	<script id="pagerTemplate" type="text/template">
		<div class="pagination">
            <ul class="pagination">
                {{#if IsFirstPage}}
                <li class="disabled"><a>««</a></li>
                {{else}}
                <li><a href="/ajax/ajaxpage?page=1">««</a></li>
                {{/if}}

                {{#if HasPreviousPage}}
                <li><a href="/ajax/ajaxpage?page={{PreviousPageNumber}}">«</a></li>
                {{else}}
                <li class="disabled"><a>«</a></li>
                {{/if}}

                {{#unless FirstPageIsVisible}}
                <li class="disabled"><a>...</a></li>
                {{/unless}}

                {{#each Pages}}
                {{#if Selected}}
                <li class="active"><a>{{PageNumber}}</a></li>
                {{else}}
                <li><a href="/ajax/ajaxpage?page={{PageNumber}}">{{PageNumber}}</a></li>
                {{/if}}
                {{/each}}

                {{#unless LastPageIsVisible}}
                <li class="disabled"><a>...</a></li>
                {{/unless}}

                {{#if HasNextPage}}
                <li><a href="/ajax/ajaxpage?page={{NextPageNumber}}">»</a></li>
                {{else}}
                <li class="disabled"><a>»</a></li>
                {{/if}}

                {{#if IsLastPage}}
                <li class="disabled"><a>»»</a></li>
                {{else}}
                <li class="next"><a href="/ajax/ajaxpage?page={{PageCount}}">»»</a></li>
                {{/if}}
            </ul>
		</div>
	</script>

	<script type="text/javascript" src="/Scripts/handlebars-1.0.0.beta.6.js"></script>
	<script type="text/javascript">
		// we use Handlebars.js (http://handlebarsjs.com/) here, but any templating language would work
		var namesTemplate = Handlebars.compile($('#namesTemplate').html());
		var pagerTemplate = Handlebars.compile($('#pagerTemplate').html());

		var fetchPage = function (pageUrl) {
			$.get(pageUrl, function (data) {
				window.location.hash = data.pager.PageNumber;

				// determine how many pages should be shown
				var start, end;
				var numberOfPagesToShowAtOnce = 10;
				var halfOfPagesToShowAtOnce = Math.floor(numberOfPagesToShowAtOnce / 2);
				start = data.pager.PageNumber - halfOfPagesToShowAtOnce;
				if (start < 1)
					start = 1;
				if ((start + numberOfPagesToShowAtOnce) > data.pager.PageCount)
					end = data.pager.PageCount;
				else
					end = start + numberOfPagesToShowAtOnce;

				// add each visible page to an array to show
				data.pager.Pages = [];
				for (var i = start; i <= end; i++) {
					data.pager.Pages.push({
						PageNumber: i,
						Selected: i === data.pager.PageNumber
					});
				}

				// used for showing/hiding ellipsis
				data.pager.FirstPageIsVisible = start === 1;
				data.pager.LastPageIsVisible = end === data.pager.PageCount;

				// add urls for previous & next pages
				data.pager.PreviousPageNumber = data.pager.PageNumber - 1
				data.pager.NextPageNumber = data.pager.PageNumber + 1

				// render templates
				$('#namesList').html(namesTemplate(data.names)).attr('start', data.pager.FirstItemOnPage);
				$('#namesPager').html(pagerTemplate(data.pager));

				// bind to page click events
				$('#namesPager li a').click(function (event) {
					event.preventDefault();
					var newPageUrl = $(event.target).attr('href');
					if (newPageUrl) {
						fetchPage(newPageUrl);
					}
				});
			});
		}

		$(function () {
			var page = window.location.hash
				? window.location.hash.slice(1)
				: 1;
			fetchPage('/ajax/ajaxpage?page=' + page);
		});
	</script>
}